<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
				xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
  <meta charset="utf-8"/>
  <title>图书列表</title>
  <link rel="stylesheet" href="/css/layui.css" media="all"/>
  <link rel="stylesheet" href="/css/user.css" media="all" />
  
</head>
<body>

<br/>
<div class="layui-btn-group otherOperation">
  <button class="layui-btn" data-type="addRecommended">添加轮播</button>
</div>

<table class="layui-hide" id="recommendTable" lay-filter="tableFilter"></table>



<div class="form-group" id="addRecommended" hidden="hidden">
<form class="layui-form" action="">
	<div class="user_left">
	  <div class="layui-form-item">
	  	<input type="hidden" id="a-form-recommendedid" name="recommendedid"/>
	    <label class="layui-form-label">跳转地址</label>
	    <div class="layui-input-inline">
	      <input type="text"  id="a-form-url" name="url"    autocomplete="off" class="layui-input" />
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">图书id</label>
	    <div class="layui-input-inline">
	      <input type="text"  id="a-form-bookId" name="bookId"      autocomplete="off" class="layui-input" />
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">活动id</label>
	    <div class="layui-input-inline">
	      <input type="text"  id="a-form-avtivityId" name="avtivityId"     autocomplete="off" class="layui-input" />
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">许愿id</label>
	    <div class="layui-input-inline">
	      <input type="text"  id="a-form-wishId" name="wishId"    autocomplete="off" class="layui-input" />
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">轮播权重</label>
	    <div class="layui-input-inline">
	      <input type="text"  id="a-form-toSort" name="toSort" placeholder="请输入轮播权重"   lay-verify="number"  autocomplete="off" class="layui-input" />
	    </div>
	  </div>
  </div>
  <div class="user_right">
		<div class="layui-upload">
			  <button type="button" class="layui-btn" id="addImg">添加图片</button>
			  <input type="hidden" id="a-form-circlepicture" name="circlepicture" required="required"  lay-verify="required"/>
			  <div class="layui-upload-list">
			    <img class="layui-upload-img" id="a-form-recommendedimg" src="" width="200px" height="250px"/>
			    <p id="addImgText"></p>
			  </div>
		</div>
  </div>
  <button class="layui-btn layui-hide" lay-submit="" lay-filter="subAddRecommended">确认添加</button>
</form>  
</div>


<div class="form-group" id="editRecommended" hidden="hidden">
<form class="layui-form" action="">
	<div class="user_left">
	  <div class="layui-form-item">
	  	<input type="hidden" id="form-recommendedid" name="recommendedid"/>
	    <label class="layui-form-label">跳转地址</label>
	    <div class="layui-input-inline">
	      <input type="text"  id="form-url" name="url"    autocomplete="off" class="layui-input" />
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">图书id</label>
	    <div class="layui-input-inline">
	      <input type="text"  id="form-bookId" name="bookId"      autocomplete="off" class="layui-input" />
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">活动id</label>
	    <div class="layui-input-inline">
	      <input type="text"  id="form-avtivityId" name="avtivityId"     autocomplete="off" class="layui-input" />
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">许愿id</label>
	    <div class="layui-input-inline">
	      <input type="text"  id="form-wishId" name="wishId"    autocomplete="off" class="layui-input" />
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">轮播权重</label>
	    <div class="layui-input-inline">
	      <input type="text"  id="form-toSort" name="toSort" placeholder="请输入轮播权重"   lay-verify="number"  autocomplete="off" class="layui-input" />
	    </div>
	  </div>
  </div>
  <div class="user_right">
		<div class="layui-upload">
			  <button type="button" class="layui-btn" id="uploadImg">更换图片</button>
			  <input type="hidden" id="form-circlepicture" name="circlepicture"/>
			  <div class="layui-upload-list">
			    <img class="layui-upload-img" id="form-recommendedimg" src="" width="200px" height="250px"/>
			    <p id="imgText"></p>
			  </div>
		</div>
  </div>
  <button class="layui-btn layui-hide" lay-submit="" lay-filter="updateRecommended">立即提交</button>
</form>  
</div>









<script type="text/javascript"></script> 
<script src="/layui.js"></script>
<script>
layui.use('table', function(){
  var table = layui.table;
  
  table.render({
    elem: '#recommendTable'
    ,height: 'full'                   
    ,url: '/admin/getRecommend' //数据接口
    ,request: {
    		  pageName: 'begin' //页码的参数名称，默认：page
    		  ,limitName: 'length' //每页数据量的参数名，默认：limit
    		  }
    ,page: true //开启分页
    ,even: true
    ,cols: [[ //表头
      {checkbox: true, fixed: true}
      ,{field: 'recommendedid', title: 'id', align:'center',width:200, sort: true, fixed: 'left'}
      ,{field: 'circlepicture', title: '图片路径', align:'center',width:650}
      ,{field: 'url', title: '跳转地址', align:'center',width:150}
      ,{field: 'bookId', title: '图书id', align:'center',width:150}
      ,{field: 'avtivityId', title: '活动id', align:'center',width:80}
      ,{field: 'wishId', title: '许愿id', align:'center',width:80, sort: true}
      ,{field: 'toSort', title: '轮播权重', align:'center',width:120, sort: true}
      ,{fixed: 'right', title: '操作',width:150, align:'center', toolbar: '#handler'} //这里的toolbar值是模板元素的选择器
    ]],done: function(res, page, count){
        //如果是异步请求数据方式，res即为你接口返回的信息。  
        //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度  
		/*<![CDATA[*/
        $("[data-field='circlepicture']").children().each(function(){
     	   if($(this).text()!=''&&$(this).text()!='图片路径'){
     		   var circlepicture =$(this).text();
     		    circlepicture =  circlepicture.replace("https://deepfeel-1253391577.cos.ap-guangzhou.myqcloud.com","");
                $(this).text(circlepicture);
             }
        })
        
        $("[data-field='url']").children().each(function(){
     	   if($(this).text()==''||$(this).text()==null){
                $(this).text("×");
             }
        })
        
        $("[data-field='bookId']").children().each(function(){
     	   if($(this).text()==''||$(this).text()==null){
                $(this).text("×");
             }
        })
        
        $("[data-field='wishId']").children().each(function(){
     	   if($(this).text()==''||$(this).text()==null){
                $(this).text("×");
             }
        })
        
        $("[data-field='avtivityId']").children().each(function(){
     	   if($(this).text()==''||$(this).text()==null){
                $(this).text("×");
             }
        })
        /*]]>*/
        
	}
  });
    
  	  
    //条件查询
	var $ = layui.$, active = {
		addRecommended: function(){ //添加轮播
			var openIndex = layer.open({
		        type: 1,
		        title: '添加轮播',
		        area : ['800px' , '450px'], 
		        scrollbar: false,//禁止浏览器滚动
		        closeBtn: 2,
		        content: $("#addRecommended"),
		        btn: ['确认添加', '取消'],
		        yes: function(index,layero){
		        	layero.find('button[lay-filter=subAddRecommended]').click();//触发form提交按钮
		        },
		        btn2: function(){
		          layer.close(openIndex);
		        }
	        });
		    //提交按钮
		    layui.use(['form', 'jquery'], function(){
			  var form = layui.form;
			  $=layui.jquery;
			  form.on('submit(subAddRecommended)', function(data){
				  var recommendedid  = data.field.recommendedid;
				  var url  = data.field.url;
				  var bookId  = data.field.bookId;
				  var avtivityId  = data.field.avtivityId;
				  var wishId  = data.field.wishId;
				  var toSort  = data.field.toSort;
				  var circlepicture  = data.field.circlepicture;
				  $.ajax({
				    	url:"/admin/updateRecommend",
				    	data:{recommendedid:recommendedid,url:url,bookId:bookId,avtivityId:avtivityId,
				    		wishId:wishId,toSort:toSort,circlepicture:circlepicture},
				    	type:"POST",
				    	success:function(rdata){
				    		if(rdata.rspCode=="000000"){
				    			//同步更新缓存对应的值
					    		$(".layui-laypage-btn").click();
					    		layer.msg('添加图书成功')
					    		layer.close(openIndex);
							    $("#addRecommended :input").val("");
							    $("#a-form-recommendedimg").attr('src',"");
				    		}else{
				    			layer.msg('添加图书失败')
				    		}
				    	},
				    	error:function(rdata){
				    		layer.alert('请重试..', {
							      title: '错误提示'
							    });
				    	}
				    });
				    return false;
			  });
			});
		}
	};

	$('.recommendDiv .layui-btn').on('click', function() {
		var type = $(this).data('type');
		active[type] ? active[type].call(this) : '';
	});
	
	
	//操作绑定
	table.on('tool(tableFilter)', function(obj){ //注：tool是固定的工具条事件名，tableFilter是table原始容器的属性 lay-filter="对应的值"
		  var data = obj.data; //获得当前行数据
		  var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
		  var tr = obj.tr; //获得当前行 tr 的DOM对象
		 
		  if(layEvent === 'del'){
	    	layer.confirm("确定删除？", function(index){
	    		  var recommendedid = data.recommendedid;
	    		  var circlepicture = data.circlepicture;
			      $.ajax({
		            url: "/admin/deleteRecommend",
		            type: "POST",
		            data:{recommendedid:recommendedid,circlepicture:circlepicture},
		            success: function (d) {
	            	  if(d.rspCode="000000"){
		            	  obj.del();
		              }
	            	  layer.msg(d.rspMsg);
		  		      layer.close(index);
		            },
		            error: function (d) {
		                alert("error:"+d);
		            }
	        	  });
			    });
		  } else if(layEvent === 'edit'){ //编辑
			  $("#form-recommendedid").val(data.recommendedid);
			  $("#form-url").val(data.url);
			  $("#form-bookId").val(data.bookId);
			  $("#form-avtivityId").val(data.avtivityId);
			  $("#form-wishId").val(data.wishId);
			  $("#form-toSort").val(data.toSort);
			  if(data.circlepicture!=null){
				  $("#form-circlepicture").val(data.circlepicture);
				  $("#form-recommendedimg").attr('src',data.circlepicture);
			  }
			  var openIndex = layer.open({
				        type: 1,
				        title: '编辑轮播信息',
				        area : ['800px' , '450px'], 
				        scrollbar: false,//禁止浏览器滚动
				        closeBtn: 2,
				        content: $("#editRecommended"),
				        btn: ['确定修改', '取消'],
				        yes: function(index,layero){
				        	layero.find('button[lay-filter=updateRecommended]').click();//触发form提交按钮
				        },
				        btn2: function(){
				          layer.close(openIndex);
				        }
			        });
			  //提交按钮
			  layui.use(['form', 'jquery'], function(){
				  var form = layui.form;
				  $=layui.jquery;
				  form.on('submit(updateRecommended)', function(data){
					var recommendedid  = data.field.recommendedid;
					var url  = data.field.url;
					var bookId  = data.field.bookId;
					var avtivityId  = data.field.avtivityId;
					var wishId  = data.field.wishId;
					var toSort  = data.field.toSort;
					var circlepicture  = data.field.circlepicture;
				    $.ajax({
				    	url:"/admin/updateRecommend",
				    	data:{recommendedid:recommendedid,url:url,bookId:bookId,avtivityId:avtivityId,
				    		wishId:wishId,toSort:toSort,circlepicture:circlepicture},
				    	type:"POST",
				    	success:function(rdata){
				    		if(rdata.rspCode=="000000"){
				    			$(".layui-laypage-btn").click();
				    		}
				    		layer.msg(rdata.rspMsg);
				    		layer.close(openIndex);
				    	},
				    	error:function(rdata){
				    		layer.alert('请重试..', {
							      title: '错误提示'
							    });
				    	}
				    });
				    return false;
				  });
			});	 
		    
		  }
		});
	
	
	
	  //监听表格复选框选择
	  table.on('checkbox(tableFilter)', function(obj){
	    console.log(obj)
	  });
	  
	  $('.otherOperation .layui-btn').on('click', function(){
		    var type = $(this).data('type');
		    active[type] ? active[type].call(this) : '';
	  });
});


 
</script>






</body>
<script>
<!-- 图片上传 -->
layui.use('upload', function(){
	  var $ = layui.jquery
	  ,upload = layui.upload;
	  
	  
	  //添加轮播 图片上传
	  var uploadAdd = upload.render({
	    elem: '#addImg'
	    ,url: '/admin/uploadRecommendImg'
    	,data: {
    		recommendedid: function(){
       		    return $('#a-form-recommendedid').val();
       		},
    		circlepicture: function(){
       		    return $('#a-form-circlepicture').val();
       		}
   		}
	    ,exts: 'png|jpg|bmp|jpeg|gif'
	  	,size: 10240
	    ,before: function(obj){
	      //预读本地文件示例，不支持ie8
	      obj.preview(function(index, file, result){
	        $('#a-form-recommendedimg').attr('src', result); //图片链接（base64）
	      });
	    }
	    ,done: function(res){
	      //上传成功
	      if(res.rspCode =="000111"){
	    	  $('#a-form-circlepicture').val(res.data.circlepicture);
	    	  $('#a-form-recommendedid').val(res.data.recommendid);
	    	  console.log($('#a-form-recommendedid').val());
	    	  console.log($('#a-form-circlepicture').val());
	          return layer.msg('上传图片成功');
	      }else if(res.rspCode =="000000"){
	    	  return layer.msg('替换图片成功');
	      }else{
	    	  return layer.msg('上传图片失败');
	      }
	    }
	    ,error: function(){
		      //重传
		      var addImgText = $('#addImgText');
		      addImgText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini add-reload">重试</a>');
		      addImgText.find('.add-reload').on('click', function(){
		    	  uploadAdd.upload();
		      });
	    }
	  });
	  
	  
	  
	  //图片更新上传
	  var uploadInst = upload.render({
	    elem: '#uploadImg'
	    ,url: '/admin/uploadRecommendImg'
    	,data: {
   		  recommendedid: function(){
   		    return $('#form-recommendedid').val();
   		  },
   		  circlepicture: function(){
   		    return $('#form-circlepicture').val();
   		  }
   		}
	    ,exts: 'png|jpg|bmp|jpeg|gif'
	  	,size: 10240
	    ,before: function(obj){
	      //预读本地文件示例，不支持ie8
	      obj.preview(function(index, file, result){
	        $('#form-recommendedimg').attr('src', result); //图片链接（base64）
	      });
	    }
	    ,done: function(res){
	      //上传成功
	      if(res.rspCode =="000000"){
	    	  $("#form-circlepicture").val(res.data);
	          return layer.msg('更换图片成功');
	      }else{
	    	  return layer.msg('更换图片失败');
	      }
	    }
	    ,error: function(){
	      //重传
	      var imgText = $('#imgText');
	      imgText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
	      imgText.find('.demo-reload').on('click', function(){
	        uploadInst.upload();
	      });
	    }
	  });
});
</script>
<script type="text/html" id="handler">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
</html>